<template>
	<view>
		<u-sticky>
			<u-tabs :list="list" :current="current" @change="change"></u-tabs>
		</u-sticky>
		<view class="relative overflow-hidden bg-white mt-40 mx-16 pt-50 px-40 pb-30">
			<image class="absolute w-full h-full" mode="aspectFill" src="@/static/images/wallte_bg_blue.png">
			</image>
			<view class="relative">
				<view class="font-30 leading-1 font-medium flex items-center justify-between">
					<view>余额</view>
					<view v-if="isOpenSave" class="fFont f-chongzhi font-48"
						hover-class="hover-class" hover-stay-time="150"
						@click="$ut.route('pages/money/recharge',{shopId: list[current].shopId})"></view>
				</view>
				<view class="mt-12 font-58 leading-1">
					<u-count-to color="#fff" bold :start-val="30" :end-val="balance" :decimals="2" separator=","></u-count-to>
				</view>
				<view class="mt-30 leading-1 text-right">
					<text style="opacity: .6;">为您节省：</text>
					<text>111</text>
				</view>
			</view>
		</view>
		<view class="list-box flex items-center justify-between mx-32 mt-30 p-24" v-for="item in flowMoneyConsumptionData"
			:key="item.id">
			<view class="flex items-center">
				<view class="store-icon flex items-center justify-center">
					<u-icon :name="item.type == 0 ? 'shopping-cart' : 'bookmark'"></u-icon>
				</view>
				<view class="ml-20">
					<view class="font-30 font-bold">{{item.type == 0 ? '消费' : '充值'}}</view>
					<view class="font-24" style="color: #999;">{{item.createTime}}</view>
				</view>
			</view>
			<view style="color: #FF0909;" v-if="item.type == 0">
				-<text class="price font-28">{{item.money}}</text>
			</view>
			<view style="color: #00aa00;" v-else>
				+<text class="price font-28" style="color: #00aa00;">{{item.money}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				list: [],
				flowMoneyConsumptionData: [],
				current: 0,
				balance: 0
			}
		},
		onShow() {
			this.current = 0;
			this.balance = 0;
			this.list = []
			this.getShopSaveUserShop();
		},
		computed: {
			...mapState(['hasLogin', 'userInfo']),
			isOpenSave(){
				let isOpenSave;
				if(this.list.length != 0){
					isOpenSave = this.list[this.current].shopInfo.isOpenSave;
				}else{
					return ''
				}
				return isOpenSave
			},
			shopId(){
				let shopId;
				if(this.list.length != 0){
					shopId = this.list[this.current].shopId;
				}else{
					return ''
				}
				return shopId
			},
		},
		methods: {
			// 获取用户储蓄店铺
			getShopSaveUserShop() {
				this.$u.api.getShopSaveUserShop({
					userId: this.userInfo.id
				}).then(res => {
					console.log(res.dataList);
					if (res.dataList == null) return false;
					res.dataList.forEach(item => {
						this.list.push({
							...item,
							name: item.shopInfo.name
						});
					})
					this.getShopSaveUserBalance(this.list[0].shopId);
					this.getFlowMoneyConsumptionToShopSaveUser(this.list[0].shopId);
				})
			},
			// 获取用户储蓄余额
			getShopSaveUserBalance(shopId) {
				this.$u.api.getShopSaveUserBalance({
					userId: this.userInfo.id,
					shopId
				}).then(res => {
					console.log(res, 'res...');
					this.balance = res.data;
				})
			},
			// 获取用户在店铺储蓄消费
			getFlowMoneyConsumptionToShopSaveUser(shopId) {
				this.$u.api.getFlowMoneyConsumptionToShopSaveUser({
					userId: this.userInfo.id,
					shopId
				}).then(res => {
					this.flowMoneyConsumptionData = res.dataList;
				})
			},
			change(index) {
				this.current = index;
				this.getShopSaveUserBalance(this.list[index].shopId);
			}
		}
	}
</script>

<style lang="scss">
	.absolute {
		position: absolute;
		top: 0;
		left: 0;
	}

	.relative {
		position: relative;
		color: #fff;
	}

	.leading-1 {
		line-height: 1;
	}

	.list-box {
		border-radius: 20rpx;
		box-shadow: 0 0 10upx 0 rgba(0, 0, 0, .2);
	}

	.store-icon {
		background-color: #f6f4f4;
		width: 90rpx;
		height: 90rpx;
		border-radius: 50%;
	}
</style>